<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin:0px;padding:0px;}
        .big,.small,.big1{width: 150px;height: 150px;color: #e25f5b;font-weight: bold;border-radius:50%;border: 1px solid #007aff;position:absolute;bottom: 80px;right:5px;z-index:1;text-align: center;background: -webkit-linear-gradient(158.5deg,  #fff 0%, #007aff 100%);background: linear-gradient(158.5deg,  #fff 0%, #007aff 100%);}
        .big{box-shadow:5px 6px 10px #848181;-webkit-animation:circle 5s infinite linear;/*匀速 循环*/}
        .big1{width:148px;height:148px;line-height:148px;bottom: 81px;right: 6px;background:none;z-index:2;}
        .small{width: 10px;height: 10px;background: #eaac1a;bottom: 155px;right: 88px;border: 1px dashed #e0d222;}
        @-webkit-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(360deg); }
        }
    </style>
</head>
<body>
<h4>两个大圆，big和big1，big是会转，并且有阴影，big1不会转，没阴影，用来挡住big。
    小圆，看html结构，与大圆big是父级关系，故其转动时伴随大圆big的。</h4>
<div style="position:relative;width:400px;height:400px;">
    <div class="big">
        <div class="small"></div>
    </div>
    <div class="big1">大圆</div>
</div>
</body>
</html>